import style from './style.module.scss'
import { useState, useEffect } from 'react'
import Wishlist from '../../api/wish'
import { useNavigate } from 'react-router-dom'
import Bottom from '../../components/bottom'

const { heartBox, wishBox, wishCont, listBox, noLoginBox, startBtn, listItem } = style

const Wish = () => {
  const [height, setHeight] = useState(64)
  const [userid] = useState<any>(sessionStorage.getItem("userid"))
  const [wishList, setWishList] = useState([])
  const navigate = useNavigate()
  const getwishList = async () => {
    let res = await Wishlist['getwList'](userid)
    setWishList(res.data)
  }
  useEffect(() => {
    getwishList()

  }, [])
  
  return <div onWheel={(e) => {
    if (e.deltaY > 0) {
      setHeight(0)
    } else {
      setHeight(64)
    }
  }}>
    {sessionStorage.getItem('userid') ?

      <div className={wishBox}>
        <h1>心愿单</h1>
        <div className={listBox}>
          {
            wishList.length > 0 ? wishList.map((item: any) => <div className={listItem} onClick={() => navigate('/wishChild', { state: { wishItem: item  } })} key={item.id}>
              <div className={heartBox} >
                <div>
                  {
                    item.children.length > 0 ? <img src={item.children[0].banners[0]} alt="" /> : <svg role="presentation" focusable="false" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', height: '60px', width: '60px', overflow: 'visible', marginTop: "40px", marginLeft: "45px" }}><path d="m42.7339407 6.25526758c-3.6446988.09824088-7.1357893 1.56818906-9.7721992 4.20459892l-2.9617415 2.9611335-2.959651-2.9609179c-2.7334528-2.73145357-6.3791862-4.2100821-10.165349-4.2100821-3.7853043 0-7.4326911 1.47929914-10.16325848 4.2098665-2.73260431 2.7326043-4.21174152 6.3782584-4.21174152 10.1651335 0 8.5781865 4.77086404 15.8591454 14.4972232 23.9021764l.8842692.7223634c.448763.362255.9074724.7261612 1.3761446 1.0919033l.9506333.7339871c.1606545.1227575.3224172.2457326.4852888.3689323l.9905401.7419473c.1673093.1241252.3357287.2484886.5052587.3730972l1.0305133.7506469 1.0571989.7568575 1.2415707.8743285.8430958.5863483.8363211.5765799 2.1017884 1.4313436.7010602.4740169 1.9595314-1.3295815.8378611-.5732766 1.264154-.8734102.8289536-.5792562.8288476-.5851981.5320336-.3792941 1.0440388-.7538431c.1717823-.125127.3424529-.2500018.5120125-.3746312l1.0040298-.7448872.9773943-.7393277c.1606811-.1227763.3202536-.2453346.4787181-.3676818l.9374967-.7316049c1.3863167-1.0937721 2.682989-2.171555 3.8904682-3.2383428l.7917772-.7096178c7.785733-7.0809844 11.6117768-13.7226173 11.6117768-21.4045754 0-3.7879205-1.4778837-7.4331507-4.2098665-10.1651335-2.7332373-2.73123797-6.3789707-4.2098665-10.1651335-4.2098665zm.3910593 2.49473242c3.1298069 0 6.1382299 1.22014961 8.39769 3.4779568 2.2579501 2.2579502 3.47731 5.2655263 3.47731 8.3970432 0 6.9154956-3.6176446 13.0849118-11.0862748 19.8132751l-.7863637.698085-.8138953.7023937c-.1379468.1174426-.2770431.235078-.4172901.352913l-.8553006.7094589c-.5794191.4746408-1.1772884.9526891-1.7936844 1.4345731l-.9384986.7257563c-.3174709.2429134-.6395831.4868392-.9663461.7318309l-.9942509.7382265c-.1680371.1235886-.3372393.247457-.5076077.371612l-1.0362159.7484219c-.1750384.1253279-.3512455.2509558-.5286225.3768903l-1.2279329.8647213-.8324584.5789361-2.2162581 1.5169059-.5510068-.3745607-.8345736-.571031-.8306777-.5726959-1.2373908-.8626134-.8236765-.5815569-1.0500347-.7518407-1.0220251-.74481c-.1680066-.1235669-.3348484-.2468543-.5005268-.3698688l-.9801178-.7348657c-.4830874-.365849-.9557248-.7293623-1.4179442-1.0907204l-.910558-.7198962c-.597791-.4780863-1.1770993-.9525552-1.7380012-1.4238343l-.8275576-.7045799-.8000051-.7001162-.7725098-.6959734c-7.20842068-6.593085-10.7023943-12.6687736-10.7023943-19.4650365 0-3.1302508 1.22044575-6.1383038 3.47950848-8.3973665 2.25694202-2.256942 5.26670112-3.4776335 8.39549152-3.4776335 3.1298069 0 6.1382299 1.22014961 8.39769 3.4779568l4.7270944 4.7294007 4.7297241-4.729724c2.256942-2.256942 5.2667011-3.4776335 8.3954915-3.4776335z" fill="#fff"></path></svg>
                  }
                </div>
              </div>
              <section className={wishCont}>
                <p><b>{item.title}</b></p>
                <p>{item.children.length}个心愿单项目</p>
              </section>
            </div>) : <div>
              <div>
                <h3 style={{ fontSize: '22px', fontWeight: 'normal', marginTop: '30px' }}>尚无心愿单</h3>
                <p style={{ fontSize: '14px', marginTop: '22px' }}>搜索时，点击心形图标即可创建心愿单，并将你喜欢的房源或体验保存到心愿单</p>
              </div>
              <div>
                <button className={startBtn} onClick={() => navigate('/')}>开始浏览</button>
              </div>
            </div>
          }
        </div>
      </div> : <div>
        <div className={noLoginBox}>
          <h1 >心愿单</h1>
          <div >
            <h2>登录并查看心愿单</h2>
            <p>登录后，你可以创建、查看或编辑心愿单</p>
            <button onClick={() => navigate('/login')} >登录</button>
          </div>
        </div>
      </div>}


    <Bottom index={1} height={height}></Bottom>
  </div>
}
export default Wish